<template>
  <view>
    <swiper indicator-dots indicator-color="rgba(0,0,255,0.5)" indicator-active-color="rgba(255,0,0,0.5)" circular
      autoplay interval="2000" vertical>
      <swiper-item>
        <image src="../../static/pic1.png" mode="aspectFill"></image>
      </swiper-item>
      <swiper-item>
        <image src="../../static/pic2.png" mode="aspectFill"></image>
      </swiper-item>
      <swiper-item>
        <image src="../../static/pic3.webp" mode="aspectFill"></image>
      </swiper-item>
      <swiper-item>
        <image src="../../static/pic4.jpg" mode="aspectFill"></image>
      </swiper-item>
    </swiper>
    <navigator url="/pages/demo2/demo2">跳转到demo2</navigator>
    <view>
      <image class="pic1" src="../../static/logo.png"></image>
      <image class="pic2" src="../../static/pic3.webp" mode="aspectFill"></image>
      <image class="pic3" src="../../static/pic4.jpg" mode="widthFix"></image>
    </view>
  </view>
</template>

<script setup>

</script>

<style lang="scss">
  .pic1 {
    width: 150px;
    height: 150px;
  }

  .pic2 {
    width: 200px;
    height: 200px;
  }

  .pic3 {
    width: 300px;
  }

  swiper {
    width: 100vw;
    height: 200px;
    border: 1px solid green;

    swiper-item {
      width: 100%;
      height: 100%;
      background-color: pink;

      image {
        width: 100%;
        height: 100%;
      }
    }

    swiper-item:nth-child(2n) {
      background-color: orange;
    }
  }
</style>